import { Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import {
	getUserBrief,
	getUserMsg,
	getUserWorks,
	getUserWorksById,
	InitUserDetail,
	IUserDetail,
	IWorkItem,
} from '../../api/threeApi';
import Footer from '../../components/Footer/Footer';
import Like from './Like';
import Favorite from './Favorite';
import './UserIndex.scss';
import Goback2Top from '../../components/Goback2Top';

interface IPropsIndex
	extends RouteComponentProps<{
		uid: string;
	}> {}

export default function UserIndex(props: IPropsIndex) {
	const [dataList, setDataList] = useState<IWorkItem[]>([]);
	const [userBrief, setUserBrief] = useState({
		uid: 0,
		name: '',
		signature: '',
	});

	useEffect(() => {
		const uid = props.match.params.uid;
		getUserBrief(uid)
			.then((res) => {
				setUserBrief(res.data);
			})
			.catch((err) => {});
		getUserWorksById({
			offset: 0,
			limit: 1000,
			uid,
		})
			.then((res) => {
				console.log(res);
				setDataList(res.items);
			})
			.catch((err) => {});
	}, []);
	return (
		<div className="content userCenter">
			<Goback2Top />
			<div>
				<div className="banner-usercenter d-f jc pb100 pt36">
					<div className="w1200 d-f jc ta-c c-text-w">
						<div>
							{/* <img src={userBrief.avatar || require('../../image/portrait.png').default} alt="" /> */}
							<div className="fs24 strong ptb20">{userBrief.name}</div>
							<div>{userBrief.signature}</div>
						</div>
					</div>
				</div>
				<div className="d-f jc">
					<div className="w1200 br10 bg-w p-r p16 plr50" style={{ top: -56 }}>
						<Tabs defaultActiveKey="1" centered={true}>
							<Tabs.TabPane tab="发布的作品" key="1">
								<div className="d-f fw">
									{dataList.map((item) => (
										<div
											className="cp mr24 mt32"
											key={`work${item.id}`}
											onClick={() => {
												props.history.push(`/workDetail/${item.id}`);
											}}
										>
											<div className="w156 h156 bg-theme2 br0 ov-h">
												<img className="w100" src={item.cover} alt="" />
											</div>
											<div className="strong pt8">{item.name}</div>
											<div className="d-f ac pt8">
												<img
													className="mr12"
													src={require('../../image/good.png').default}
													alt=""
												/>
												<span>{item.num_likes}</span>
												<img
													className="mlr12"
													src={require('../../image/eye.png').default}
													alt=""
												/>
												<span>{item.num_views}</span>
											</div>
											<div className="d-f ac pt8 w156 ellip1">
												<img
													className="w32 br100"
													src={
														item.creator.avatar || require('../../image/user2.png').default
													}
												/>
												<span className="c-hint-b pl6 ellip1">{item.creator.name}</span>
											</div>
										</div>
									))}
								</div>
							</Tabs.TabPane>
							<Tabs.TabPane tab="点赞的作品" key="2">
								<Like {...props} />
							</Tabs.TabPane>
							<Tabs.TabPane tab="我的收藏夹" key="3">
								<Favorite {...props} />
							</Tabs.TabPane>
						</Tabs>
					</div>
				</div>
			</div>
			<Footer {...props} />
		</div>
	);
}
